<template>
  <div class="app-container">
    <!-- 顶部Header区域 -->
    <mt-header fixed title="我的APP"></mt-header>
    <!-- 中间的路由router-view区域 -->
    <router-view></router-view>
    <!-- 底部Tabbar区域 -->
    <mt-tabbar>
      <router-link to="/home" class="mint-tab-item">
        <div class="mint-tab-item-icon">
          <span class="icon iconfont icon-31shouyexuanzhong"></span>
        </div>
        <div class="mint-tab-item-label">
          首页
        </div>
      </router-link>
      <router-link to="/member" class="mint-tab-item">
        <div class="mint-tab-item-icon">
          <span class="icon iconfont icon-mine2"></span>
        </div>
        <div class="mint-tab-item-label">
          会员
        </div>
      </router-link>
      <router-link to="/shopCar" class="mint-tab-item">
        <div class="mint-tab-item-icon">
          <span class="icon iconfont icon-gouwucheman"></span>
        </div>
        <div class="mint-tab-item-label">
          购物车
        </div>
      </router-link>
      <router-link to="/search" class="mint-tab-item">
        <div class="mint-tab-item-icon">
          <span class="icon iconfont icon-31sousuo"></span>
        </div>
        <div class="mint-tab-item-label">
          搜索
        </div>
      </router-link>
    </mt-tabbar>
  </div>
</template>
<script>
  export default {}
</script>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: 0;
    -webkit-tap-highlight-color: transparent
  }

  .app-container {
    padding-top: 40px;
  }

  .mint-tab-item {
    color: #26a2ff;
  }

  .mint-tab-item:hover {
    color: #ccc;
  }

  .mint-tab-item .mint-tab-item-icon span {
    font-size: 1.3em;
  }
</style>
